<template>  
  <view class="page">  
  <view class="container">
  	<view class="handera">
  	</view>
  </view>
    <view class="header"> 
	  <view class="locationName">
	  	<uni-icons type="home-filled" size="30" color="blue"></uni-icons>
		 <text>河北医科大学第一医院</text>
	  </view>
     
    </view>  
	<!-- 搜索功能 -->  
	<view class="uni-search-box">
	  <uni-search-bar ref="searchBar" radius="100" cancelButton="none" disabled placeholder="搜索科室、医生"/>  
	</view>  
		<view class="classify_wrap">
	 <!-- 横向滑动开始 -->
	 	  <view class="classify_scroll_x">
	 	    <scroll-view scroll-x="true" >
	 	      <view class="segmented-wrap">
	 	        <uni-segmented-control :current="current" :values="classify" @clickItem="onClickItem" styleType="text" activeColor="#CC0000"></uni-segmented-control>
	 	      </view>
	 	    </scroll-view>
	 	  </view>
	
	 <!-- 横向滑动结束 -->
	 	<!-- 分类 icon 开始 -->
	 			<view class="classify_icon">
	 				<uni-icons type="list" size="28" color="gray"></uni-icons>
	 			</view>
	 			<!-- 分类 icon 结束 -->
	 		</view>
    <!-- 轮播图开始 -->  
    <view class="banner-wrapper">  
      <unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-banner">  
        <view v-if="error">{{error.message}}</view>  
        <view v-else>  
          <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">  
            <swiper-item v-for="(item, index) in data" :key="item._id">  
              <view class="swiper-item">  
                <image class="banner-image" :src="item.bannerfile.url" mode="aspectFill" :draggable="false" />  
              </view>  
            </swiper-item>  
          </swiper>  
        </view>  
      </unicloud-db>  
    </view>  
    <!-- 轮播图结束 -->  				
	
	<!--开始-->
			<uni-grid :column="number">
				<uni-grid-item class="ddd">
									<view class="grid-item-box">
											<image :src="p1" style="width: 100%; height: 100%;" mode="aspectFill"></image>
									</view>
								</uni-grid-item> 
				<uni-grid-item class="ddd">
					<view class="grid-item-box">
						<image :src="p2" style="width: 100%; height: 100%;" ></image>
					</view>
						</uni-grid-item>
				<uni-grid-item class="ddd">
					<view class="grid-item-box">
						<image :src="p3" style="width: 100%; height: 100%;" ></image>
					</view>
				</uni-grid-item>
			</uni-grid>
			
			
			
			<view class="content">
						<view v-show="current === 0">
							<!-- 医生列表开始 -->
											<view class="doctorList">
												<!-- 页面分类标题 -->
												<uni-section title="医生信息" type="line"><button class="button-box" @click="select">切换视图</button></uni-section>
												<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="formData" :collection="collection"  @load="load">
													<!-- 基于 uni-list 的页面布局 -->
													<uni-list :class="{ 'uni-list--waterfall': options.waterfall }">
														<!-- 通过 uni-list--waterfall 类决定页面布局方向 -->
														<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
														<uni-list-item :border="!options.waterfall" class="uni-list-item--waterfall" title="自定义商品列表" v-for="item in data"
														 :key="item._id" :to="'/pages/detail/detail?id='+item._id+'&title='+item.name">
															<!-- 通过header插槽定义列表左侧图片 -->
															<template v-slot:header>
																<!--  <view class="slot-box">
																<view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': options.waterfall }">
														<image class="slot-image" :src="item.doctorPhoto.url" mode="widthFix"></image>
																</view>
																</view> -->
																<view class="slot-box">
																  <image class="slot-image" :src="item.doctorPhoto.url" mode="widthFix"></image>
																</view>
															</template>
									<template v-slot:body>
									<view class="doctorName">
									 <text>{{item.doctorName}}</text>
									</view>
									<view class="indications">
									 <text>主治：{{item.indications}}</text>															
									</view>
									<view class="department">
									<text>科室 ： {{ item.department }}</text>
									 </view>
									 <view class="price">
									<text class="Price"> ¥ {{ getYuan(item.price) }}</text>
									</view>
							
									</template>
									</uni-list-item>
									</uni-list>
									<uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" />
									</unicloud-db>
									</view>
									<!-- 医生列表结束 -->
						</view>
						<view v-show="current === 1">
							<!-- 儿科列表开始 -->
							<view class="doctorList">
								<unicloud-db v-slot:default="{data, loading, error, options}" collection="hosptial-doctor" where="department=='儿科'">
									<view v-if="error">{{error.message}}</view>
									<view v-else>
										<uni-list>
											<uni-list-item v-for="(item, index) in data" >
												<template v-slot:header>
												    <view class="slot-box">
												      <image class="slot-image" :src="item.doctorPhoto.url" mode="widthFix"></image>
												    </view>
												  </template>
												  <template v-slot:body>
												  <view class="doctorName">
												   <text>{{item.doctorName}}</text>
												  </view>
												  <view class="indications">
												   <text>主治：{{item.indications}}</text>															
												  </view>
												  <view class="department">
												  <text>科室 ： {{ item.department }}</text>
												   </view>
												   <view class="price">
												  <text class="Price"> ¥ {{ getYuan(item.price) }}</text>
												  </view>
												  
												  </template>
											</uni-list-item>
											
										</uni-list>
									</view>
								</unicloud-db>
							</view>
							<!-- 儿科类列表结束 -->
						</view>
						<!-- 外科类列表开始 -->
						<view v-show="current === 2">
							<view class="doctorList">
								<unicloud-db v-slot:default="{data, loading, error, options}" collection="hosptial-doctor" where="department=='外科'">
									<view v-if="error">{{error.message}}</view>
									<view v-else>
										<uni-list>
											<uni-list-item v-for="(item, index) in data" >
												<template v-slot:header>
												    <view class="slot-box">
												      <image class="slot-image" :src="item.doctorPhoto.url" mode="widthFix"></image>
												    </view>
												  </template>
												  <template v-slot:body>
												  <view class="doctorName">
												   <text>{{item.doctorName}}</text>
												  </view>
												  <view class="indications">
												   <text>主治：{{item.indications}}</text>															
												  </view>
												  <view class="department">
												  <text>科室 ： {{ item.department }}</text>
												   </view>
												   <view class="price">
												  <text class="Price"> ¥ {{ getYuan(item.price) }}</text>
												  </view>
												  
												  </template>
											</uni-list-item>
											
										</uni-list>
									</view>
								</unicloud-db>
							</view>
							<!-- 外科类列表结束 -->
						</view>
						
						<view v-show="current === 3">
							<!-- 妇产科列表开始 -->
							<view class="doctorList">
								<unicloud-db v-slot:default="{data, loading, error, options}" collection="hosptial-doctor" where="department=='妇产科'">
									<view v-if="error">{{error.message}}</view>
									<view v-else>
										<uni-list>
											<uni-list-item v-for="(item, index) in data" >
												<template v-slot:header>
												    <view class="slot-box">
												      <image class="slot-image" :src="item.doctorPhoto.url" mode="widthFix"></image>
												    </view>
												  </template>
												  <template v-slot:body>
												  <view class="doctorName">
												   <text>{{item.doctorName}}</text>
												  </view>
												  <view class="indications">
												   <text>主治：{{item.indications}}</text>															
												  </view>
												  <view class="department">
												  <text>科室 ： {{ item.department }}</text>
												   </view>
												   <view class="price">
												  <text class="Price"> ¥ {{ getYuan(item.price) }}</text>
												  </view>
												  
												  </template>
											</uni-list-item>
											
										</uni-list>
									</view>
								</unicloud-db>
							</view>
							<!-- 妇产科类列表结束 -->
						</view>
						
						
						<view v-show="current === 4">
							<!-- 内科列表开始 -->
							<view class="doctorList">
								<unicloud-db v-slot:default="{data, loading, error, options}" collection="hosptial-doctor" where="department=='内科'">
									<view v-if="error">{{error.message}}</view>
									<view v-else>
										<uni-list>
											<uni-list-item v-for="(item, index) in data" >
												<template v-slot:header>
												    <view class="slot-box">
												      <image class="slot-image" :src="item.doctorPhoto.url" mode="widthFix"></image>
												    </view>
												  </template>
												  <template v-slot:body>
												  <view class="doctorName">
												   <text>{{item.doctorName}}</text>
												  </view>
												  <view class="indications">
												   <text>主治：{{item.indications}}</text>															
												  </view>
												  <view class="department">
												  <text>科室 ： {{ item.department }}</text>
												   </view>
												   <view class="price">
												  <text class="Price"> ¥ {{ getYuan(item.price) }}</text>
												  </view>
												  
												  </template>
											</uni-list-item>
											
										</uni-list>
									</view>
								</unicloud-db>
							</view>
							<!-- 内科类列表结束 -->
						</view>
						
						
						<view v-show="current === 5">
							<!-- 五官科列表开始 -->
							<view class="doctorList">
								<unicloud-db v-slot:default="{data, loading, error, options}" collection="hosptial-doctor" where="department=='五官科'">
									<view v-if="error">{{error.message}}</view>
									<view v-else>
										<uni-list>
											<uni-list-item v-for="(item, index) in data" >
												<template v-slot:header>
												    <view class="slot-box">
												      <image class="slot-image" :src="item.doctorPhoto.url" mode="widthFix"></image>
												    </view>
												  </template>
												  <template v-slot:body>
												  <view class="doctorName">
												   <text>{{item.doctorName}}</text>
												  </view>
												  <view class="indications">
												   <text>主治：{{item.indications}}</text>															
												  </view>
												  <view class="department">
												  <text>科室 ： {{ item.department }}</text>
												   </view>
												   <view class="price">
												  <text class="Price"> ¥ {{ getYuan(item.price) }}</text>
												  </view>
												  
												  </template>
											</uni-list-item>
											
										</uni-list>
									</view>
								</unicloud-db>
							</view>
							<!-- 五官科类列表结束 -->
						</view>
					</view>
			
			
			
			
			
</view> 
</template>
<script>  
  export default {  
    data() {  
      return {  
		  current:0,
        indicatorDots: true,  
        autoplay: true,  
        interval: 2000,  
        duration: 50,  
		classify:["主页","儿科","外科","妇产科","内科","五官科"],
		number:3,
		p1:'/static/tabbar/666.jpg',
		p2:'/static/tabbar/777.jpg',
		p3:'/static/tabbar/888.jpg',
		column: 3,
		formData: {
			waterfall: false, // 布局方向切换
			status: 'loading', // 加载状态
		},
		collection: 'hosptial-doctor'
						// vipIcon: '/static/vip/vipIcon.png',
						// vipItem: [
						// 	{text: '购买储值卡', icon: '/static/vip/chuzhika.png'},
						// 	{text: '会员签到', icon: '/static/vip/qiandao.png'},
						// 	{text: '领券中心', icon: '/static/vip/lingquan.png'}
						// ],
      }
    },  
    methods: {
		onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			select() {
				this.formData.waterfall = !this.formData.waterfall;
			},
			load(data,ended){
				if(ended){
					this.formData.status = 'noMore'
				}
			},
			goToGrid(){
						uni.switchTab({
						url:'/pages/grid/grid'
						})
						},
						getYuan(data){
						        let yuan = Math.floor(data / 100)
						        let fen = data % 100
						        if(fen == 0) fen = "00"
						        return yuan+'.'+fen
						}
						}
  };  
</script>  
  
<style lang="scss">  
@import '../../common/uni-ui.scss';
  view {  
    display: flex;  
    box-sizing: border-box;  
    flex-direction: column;  
  }  
 .doctorName {
   font-size: 20px; /* 字体大小 */
   font-weight: bold; /* 加粗字体 */
   margin-top: 10px; /* 上边距 */
 }
.department {
  font-size: 15px; /* 字体大小 */
  color: #888888; /* 灰色字体 */
  margin-top: 5px; /* 上边距 */
}
.price {	
	font-size: 40rpx;
	}
  .container{
	 margin-top: 100rpx;
  }
 .headera{
 	display: flex;
 	flex-direction: row;
 	background-color: #FFFFFF;
 }
    .slot-box {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    
    .slot-image {
      display: block;
      margin-right: 10px;
      width: 150rpx;
      height: 200rpx;
    }
  .page {  
    background-color: #FFFFFF;  
		/* background-color: #EEEEEE; */
  }  
    
  .header {  
    display: flex;  
    flex-direction: row;  
    padding-left: 10px;  
    background-color: #FFFFFF;

  }  
    
  .uni-search-box {  
    background-color: #FFFFFF;  
    height: 50px;  
    width: 100%;  
  }  
    
  .swiper-item {  
    width: 750rpx;  
    height: 315rpx;  
    line-height: 315rpx;  
  }  
    
  .swiper {  
    height: 315rpx;  
  }  
    
  .banner-image {  
    width: 750rpx;  
    height: 315rpx;  
  }  
.grid-item-box{
  
	      width: 250rpx; /* 或其他您希望的宽度 */  
	      height: 250rpx; /* 或其他您希望的高度 */  
	      /* 其他样式，如背景色、边框等 */  
		  border-style:none;
	  
  }
  .grid-item-box image{
  		margin: 5 auto;
  	}
 	.classify_scroll_x{
 		white-space: nowrap;
 		width: 650rpx;
 		background-color: #FFFFFF;
 		margin-top: 5rpx;
 		margin-bottom: 8rpx;
 	}
 	.scroll-view-item_H {
 		display: inline-block;
 		width: 140rpx;
 		height: 90rpx;
 		line-height: 90rpx;
 		text-align: center;
 		font-size: 12rpx;
 	}
 	.scroll-view-item_selected{
 		border-bottom: 2px solid red;
 	}
 .classify_wrap {
 		width: 750rpx;
 		display: flex;
 		flex-direction: row;
 	}
 	.classify_scroll_x{
 		white-space: nowrap;
 		width: 650rpx;
 		background-color: #FFFFFF;
 		margin-top: 5rpx;
 		margin-bottom: 8rpx;
 	}
 	.classify_icon{
 		display: flex;
 		flex: 1;
 		background-color: #FFFFFF;
 		margin-left: 3rpx;
 		margin-top: 5rpx;
 		margin-bottom: 8rpx;
 	}
 	.segmented-wrap{
 		width: 1300rpx;
 	}
.locationName{
		display: flex;
		flex-direction: row;
		width: 300px;
		height: 50px;
		line-height: 50px;
		font-size: 20px;
	}.list {
		.uni-list--waterfall {

			/* #ifndef H5 || APP-VUE */
			/* 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下 */
			::v-deep .uni-list {
				/* #endif */
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 5px;
				box-sizing: border-box;

				/* #ifdef H5 || APP-VUE */
				 /* h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透 */
				::v-deep
				/* #endif */
				.uni-list-item--waterfall {
					width: 50%;
					box-sizing: border-box;

					.uni-list-item__container {
						padding: 5px;
						flex-direction: column;
					}
				}

				/* #ifndef H5 || APP-VUE */
			}

			/* #endif */
		}
	}
	.uni-list--waterfall {
		
		/* #ifndef H5 || APP-VUE */
		 /* 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下 */
		::v-deep .uni-list {
			/* #endif */
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 5px;
			box-sizing: border-box;
		
			/* #ifdef H5 || APP-VUE */
			 /* h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透 */
			::v-deep
			/* #endif */
			.uni-list-item--waterfall {
				width: 50%;
				box-sizing: border-box;
		
				.uni-list-item__container {
					padding: 5px;
					flex-direction: column;
				}
			}
		
			/* #ifndef H5 || APP-VUE */
		}
		
		/* #endif */
	}
</style>